<%@ page import="activity.Event" %>
<!DOCTYPE html>
<html>
    <head>
        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Bootstrap V3 -->
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap_blue.css')}" type="text/css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-8">
                <div id="detail${event.id}" name="detail" class="panel panel-info">
                    <div class="panel-heading text-center">
                        <p style="font-size:40px"><strong>${event.name}</strong></p>
                    </div>
                    <ul class="list-group list-group-flush text-center">
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>時間：${formatDate(format:"MM/dd HH:mm",date:event.dateStart)} ~ ${formatDate(format:" HH:mm",date:event.dateEnd)}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>地點：${event.place}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>名額：${fieldValue(bean: event, field: "registerQty")}/${fieldValue(bean: event, field: "capacityQty")}/${fieldValue(bean: event, field: "standbyQty")}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>活動對象：${event.audience}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>內容簡介：${event.intro}</li>
                        <g:if test="${event.files?.size() > 0}">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i><g:link url="${createLinkTo(file:''+event.files)}">檔案下載</g:link></li>
                        </g:if>
                        <g:if test="${event.memo}">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>備註：<br/>${event.memo}</li>
                        </g:if>
                    </ul>
                </div><!--/panel-->
            </div><!--/col-->
        </div><!--/row-->
    </body>
</html>

